<template>
  <div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100">
    <md-card>
      <md-card-header data-background-color="green">
        <h4 class="title">
          查询结果<label style="float:right;font-size:14px;margin-right:20px;">共计{{range.count}}条
          <a href="#" :class="{'disableda': noPrev}" @click="goPrev"><md-icon>skip_previous</md-icon></a>
          第{{range.curpage}}页
          <a href="#" :class="{'disableda': noNext}" @click="goNext"><md-icon>skip_next</md-icon></a>
          </label>
        </h4>
      </md-card-header>
      <md-card-content>
        <div>
          <slot></slot>
        </div>
      </md-card-content>
    </md-card>
  </div>
</template>
<script>
export default {
  props: {
    range: {}
  },
  computed: {
    noPrev: function () {
      return this.range.curpage === 1
    },
    noNext: function () {
      return this.range.curpage > Math.ceil(this.range.count / this.countpg)
    }
  },
  methods: {
    // 上一页
    goPrev: function () {
      this.range.curpage -= 1
      this.range.from = (this.range.curpage - 1) * this.range.pagesize
      this.$emit('gopage')
    },
    // 下一页
    goNext: function () {
      this.range.curpage += 1
      this.range.from = (this.range.curpage - 1) * this.range.pagesize
      this.$emit('gopage')
    }
  }
}
</script>
<style lang="scss" scoped>
  .disableda {
    pointer-events: none;
    cursor: default;
  }
</style>
